<template>
    <div class="box">
        <div class="box-clip-item"></div>
        <div class="box-clip-item"></div>
        <div class="box-clip-item"></div>
        <div class="box-clip-item"></div>
        <div class="box-clip-item"></div>
        <div class="box-clip-item"></div>
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.box {
    width: 200px;
    height: 200px;
    background-color: rgb(135, 206, 235,0.1);
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    position: relative;
}

$len:6;
@keyframes ani {
    
}
@for $i from 1 through $len {
    .box-clip-item:nth-child(#{$i}) {
        $wh:calc(($len - $i) * 15%);
        width: $wh;
        height: $wh;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
        background-color: rgba(135, 206, 235,$i*.1);
    }
}
</style>